<template>
  <div class="departments-container">
    <div class="app-container">
      <!-- el-card是一个带盒子阴影的div -->
      <el-card v-loading="loading" class="tree-card">
        <!-- 用了一个行列布局 -->
        <!-- 公司信息 -->
        <TreeTool :item="company" @add-dept="handleShowAddDept" />
        <!-- 部门信息 -->
        <el-tree :data="treeData" :props="{label:'name'}" default-expand-all>
          <!-- 父传：把data传过去 -->
          <template #default="{data}">
            <!-- 使用组件 -->
            <!-- 父监听 -->
            <TreeTool :item="data" @del-dept="handleDelDept" @add-dept="handleShowAddDept" @edit-dept="handleShowEditDept" />
          </template>
        </el-tree>
      </el-card>
      <!-- 使用adddept组件 -->
      <!-- 父传子 -->
      <AddDept :is-show="isShow" :dept-list="deptList" :item="deptObjDate" @close="isShow=false" @newAddList=" getDespList" />
      <!-- 编辑部门 -->
      <EditDept :is-show="isShowEdit" :dept-list="deptList" :item="deptObjDate" @close="isShowEdit=false" @newAddList=" getDespList" />

    </div>
  </div>
</template>

<script>
import { getDeptListAPI, delDeptAPI } from '@/api/departments'
import { list2Tree } from '@/utils/switch'
// 导入组件
import TreeTool from './components/tree-tool.vue'
import AddDept from './components/add-dept.vue'
import EditDept from './components/edit-dept.vue'
export default {
  name: 'DepartmentsView',
  components: {
    TreeTool, AddDept, EditDept

  },
  data() {
    return {
      // 部门列表数据
      deptList: [],
      // 部门树形数据
      treeData: [],
      // 公司信息对象
      company: {
        name: '',
        manager: '',
        id: ''
      },
      isShow: false,
      // 记录当前操作的部门对象
      deptObjDate: {},
      isShowEdit: false,
      loading: false
    }
  },
  created() {
    this.getDespList()
  },
  methods: {
    // 获取部门列表
    async getDespList() {
      this.loading = true
      // 调接口发请求
      const resp = await getDeptListAPI()
      this.company.name = resp.data.companyName
      this.company.manager = resp.data.companyManage
      this.company.id = resp.data.companyId
      this.treeData = list2Tree(resp.data.depts, '')
      // 保存一份列表数据
      this.deptList = resp.data.depts
      this.loading = false
    },
    // 删除部门
    async handleDelDept(id) {
      console.log(id)
      //  1.询问：
      try {
        await this.$confirm('此操作不可逆，确定删除吗？', '温馨提示', {
          type: 'warning',
          cancelButtonText: '取消',
          confirmButtonText: '确定'
        })
        // 2.确定：
        // 发请求；
        await delDeptAPI(id)
        // 再次获取部门列表
        this.getDespList()
        // 给删除成功的提示
        this.$message.success('删除成功')
      } catch (err) {
        // 3. 取消
        console.dir(err)
      }
    },
    // 添加部门显示弹窗
    async handleShowAddDept(deptObj) {
      this.isShow = true
      // 保存操作部门数据
      this.deptObjDate = deptObj
    },
    // 编辑部门显示弹窗
    async handleShowEditDept(deptObj) {
      this.isShowEdit = true
      // 保存操作部门数据
      this.deptObjDate = deptObj
    }
  }

}
</script>

  <style lang="scss" scoped>

.el-tree {
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url("~@/assets/common/add-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
      background: url("~@/assets/common/minus-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before  {
      background: url("~@/assets/common/user-filling.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
  </style>

